Page({
  /**
   * 页面的初始数据
   */
  data: {
    _img: null,
    tempSrc: '',
    src: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.ctx = wx.createCameraContext()
    // this.xx()
  },

  takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
        wx.createSelectorQuery()
        .select('#canvas')
        .fields({
          node: true,
          size: true,
        })
        .exec(this.init.bind(this))
      }
    })
    // this.xx()
  },

  xx() {
    wx.createSelectorQuery()
    .select('#canvas')
    .fields({
      node: true,
      size: true,
    })
    .exec(this.init.bind(this))
  },

  init(res) {
    console.log(res)
    const width = res[0].width
    const height = res[0].height

    const canvas = res[0].node
    const ctx = canvas.getContext('2d')

    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
    console.log(canvas)
    const img = canvas.createImage()
    console.log(img)
    const _this = this
    wx.getImageInfo({
      // src: 'https://img.alicdn.com/simba/img/TB1hMODnYH1gK0jSZFwSuw7aXXa.jpg',
      src: _this.data.src,
      success(res) {
        console.log('图片res===', res)
        _this._img = img
        ctx.translate(100, 100)
        ctx.rotate(270 * Math.PI / 180)
        // drawImage(imageResource, dx, dy, dWidth, dHeight) // dx, dy,是裁切
        ctx.drawImage(_this._img, -50, -50, 100, 50)
        // 转化成base64
        var tempSrc = canvas.toDataURL("image/png")
        console.log(tempSrc)
        _this.setData({
          tempSrc
        })
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /** 
   * 点击tab时触发
  */
  onTabItemTap(item) {
    console.log(item)
  }
})